<div class="layui-form-item text-right">
    <label class="layui-form-label {{if $.Data.IsMust}} layui-form-required{{end}}">{{$.Data.Label}}</label>
    <input type="hidden" class="layui-input" id="cover_{{$.Data.ImgId}}"
           name="{{$.Data.Name}}" {{if $.Data.IsMust
           }}lay-verify="required" {{end}} value="{{$.Data.Value}}"
           lay-reqText="{{$.Data.ReqText}}"/>
    <div style="text-align: left">
        <button type="button" class="layui-btn" id="{{$.Data.ButtonId}}">
            <i class="layui-icon">&#xe67c;</i>{{$.Data.ButtonContent}}
        </button>
        <span class="layui-upload-list text-center">
            <img class="layui-upload-img" id="{{$.Data.ImgId}}" alt=""/>
            <span class="layui-upload-file-content" id="resource_{{$.Data.ImgId}}"></span>
        </span>
    </div>
</div>
<script>
    layui.use(['layer', 'upload', 'jquery', 'admin'], function () {
        const layer = layui.layer;
        const upload = layui.upload;
        const $ = layui.jquery;
        const imageId = "{{$.Data.ImgId}}";
        const uploadId = "{{$.Data.ButtonId}}";
        const uploadUrl = "{{$.Data.UploadUrl}}";
        const cover_image_id = "cover_" + "{{$.Data.ImgId}}";
        const _value = "{{$.Data.Value}}";
        const _baseUrl = "{{$.Data.BaseUrl}}";
        const _fileType = "{{$.Data.FileType}}";
        let _uploadUrl = [];
        let loadingIndex;
        if (_value !== "") {
            if (_fileType === '图片') {
                $("#" + imageId).css("width", "100px");
                $("#" + imageId).css("height", "50px");
                $("#" + imageId).css("margin-left", "20px");
                $("#" + imageId).attr('src', _baseUrl + _value);
            } else {
                $("#resource_" + imageId).html(_baseUrl + _value);
            }
            _uploadUrl.push(_value);
        }

        /**
         * 删除冗余资源文件
         *
         * @param isAll
         * @param callback
         */
        window.deleteFiles = (isAll, callback) => {
            if (!isAll) {
                _uploadUrl.splice(_uploadUrl.indexOf($('#' + cover_image_id).val()));
            }
            layui.admin.req('common/delete-file', {'urls': _uploadUrl}, function (data) {
                console.log(data);
                if (callback) callback();
            }, 'post');
        }

        /**
         * 上传图片
         */
        upload.render({
            elem: '#' + uploadId,
            url: uploadUrl, // 上传接口
            accept: 'file',
            exts: 'jpg|png|gif|bmp|jpeg|docx|xlsx|mp4',
            auto: false,
            choose: function (obj) {//上传前选择回调方法
                var flag = true;
                obj.preview(function (index, file, result) {
                    if (file.type.indexOf('image') > -1) {
                        var img = new Image();
                        img.src = result;
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                            $("#" + imageId).next(".layui-upload-file-content").html('');
                            $("#" + imageId).css("width", "100px");
                            $("#" + imageId).css("height", "50px");
                            $("#" + imageId).css("margin-left", "20px");
                            $("#" + imageId).attr('src', result); //图片链接（base64）
                            loadingIndex = layer.load(1, {
                                shade: [0.5, '#000'] //0.1透明度的背景
                            });
                            obj.upload(index, file);
                        };
                    } else {
                        $("#" + imageId).next(".layui-upload-file-content").html(file.name);
                        obj.upload(index, file);
                    }
                    return flag;
                });
            },
            done: function (res) {
                layer.close(loadingIndex);
                // 上传完毕回调
                if (res.code === 0) {
                    $('#' + cover_image_id).val(res.data.path + "," + res.data.name);
                    _uploadUrl.push(res.data.path)
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function () {
                layer.close(loadingIndex);
                // 请求异常回调
                layer.msg('系统异常！', {icon: 2});
            }
        });
    });
</script>